<template>
  <div
    :class="[
      currentMachine.status === 'ONLINE' ? 'succ-border' : currentMachine.status === 'OFFLINE' ? 'fail-border' : 'warn-border', 'info-root info-basic-root']">
    <div class="info-title"
      :class="[currentMachine.status === 'ONLINE' ? 'succ-bg-zebra' : currentMachine.status === 'OFFLINE' ? 'fail-bg-zebra' : 'warn-bg-zebra',]">
      机器基本信息
      <div class="info-tags">
        <el-tag effect="plain" type="info" style="margin-left:10px;">
          <span class="sub-flip-color">{{ currentMachine.hostName }}</span>
        </el-tag>
        <el-tag effect="plain" type="info" style="margin-left:10px;">
          <span
            :class="currentMachine.status === 'ONLINE' ? 'succ-clr' : currentMachine.status === 'OFFLINE' ? 'fail-clr' : 'warn-clr'"
            style="font-size: 12px;font-weight: bold;">
            {{ currentMachine.status }}
          </span>
        </el-tag>
        <el-tag type="info" style="margin-left:10px;">
          {{ currentMachine.appName }}
        </el-tag>
      </div>
    </div>
    <div class="info-content">
      <el-descriptions :column="2">
        <el-descriptions-item label="机器编号:" :span="2">{{ currentMachine.machineId }}</el-descriptions-item>
        <el-descriptions-item label="所属环境:">{{ currentMachine.envName }}[{{ currentMachine.ipPort
        }}]</el-descriptions-item>

        <el-descriptions-item label="未读告警:">
          <el-tag class="warn-border warn-bg" effect="dark">{{ alertCount }}</el-tag>

          <el-button style="margin-left: 10px;" @click="alertTest">
            <el-icon class="icongc gc-ceshi"></el-icon>
          </el-button>
        </el-descriptions-item>

        <el-descriptions-item label="运行版本:">{{ currentMachine.appVersion }}</el-descriptions-item>
        <el-descriptions-item label="运行时间:">{{ currentMachine.runTime }}</el-descriptions-item>
        <el-descriptions-item label="上线时间:">{{ currentMachine.startTime }}</el-descriptions-item>
        <el-descriptions-item label="最后心跳:">{{ currentMachine.lastHeartbeatTime }}</el-descriptions-item>
      </el-descriptions>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, nextTick, inject } from "vue";
import { ElNotification } from "element-plus";
import { alertCountApi, alertTestApi } from '@/api/alert';

// ---------------- inject
const currentMachine: any = inject('currentMachine');

const alertCount = ref('0');

/**
 * 获取警告数量
 */
const getAlertCount = () => {
  if (currentMachine === undefined || currentMachine.value.machineId === '') {
    return;
  }
  // 根据传入的机器ID查询机器信息，不使用传入的其他数据。
  alertCountApi({ machineId: currentMachine.value.machineId }).then(resp => {
    alertCount.value = resp.data;
  })
}

const alertTest = () => {
  alertTestApi({ appName: currentMachine.value.appName, machineId: currentMachine.value.machineId }).then(resp => {
    ElNotification({ message: '发送测试告警成功', type: "success", position: 'bottom-right', title: '发送成功' });
  })
}

const reload = () => {
  nextTick(() => {
    getAlertCount();
  })
}

onMounted(() => {
  reload();
})

defineExpose({
  reload,
})
</script>

<style scoped lang="scss">
.info-basic-root {
  @include box(100%, 180px);
  min-height: 180px;
}
</style>